<template>
	<div class="login">
		<img src="../../assets/logo/logo.png" style="width: 150px;height: 150px;margin-right: 3rem;
    margin-top: -5rem;" />
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules">


			<el-form-item prop="username">
				<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
					<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
					@keyup.enter.native="handleLogin">
					<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
				</el-input>
			</el-form-item>

			<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#ffffff">记住密码</el-checkbox> -->
			<el-form-item style="width:60%;">
				<el-button :loading="loading" size="medium" type="primary"
					style="width:100%;background-color: cornflowerblue;border:cornflowerblue"
					@click.native.prevent="handleLogin">
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
			</el-form-item>
			<h1 class="titlelog">智慧沙洋餐厨垃圾处理监管平台</h1>
		</el-form>
		<!--  底部  -->
		<div class="el-login-footer">
			<span>
				建设单位：沙洋县城市管理执法局<br />
				技术支持单位：江苏艾力信通动力技术有限公司<br />
				Copyright©2022 江苏艾力信通动力技术有限公司 All rights reserved Version-1.0.0.0</span>
		</div>
	</div>
</template>

<script>
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt'
	import request from '@/utils/request'
	import {
		setName,
		setRoles,
		setToken,
	} from '@/utils/auth'
	export default {
		name: "Login",
		data() {
			return {
				codeUrl: "",
				cookiePassword: "",
				loginForm: {
					username: "",
					password: "",
					rememberMe: false
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "用户名不能为空"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "密码不能为空"
					}]
				},
				loading: false,
				redirect: undefined
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},

		methods: {

			handleLogin() {
				//    this.$refs.loginForm.validate(valid => {
				//      if (valid) {
				//        this.loading = true;
				//        this.$store.dispatch("Login", this.loginForm).then((res) => {
				//   console.log(res);
				// const h = this.$createElement;
				// this.$notify({
				// 	title: '登录成功',
				// 	message: h('p', {
				// 		style: 'color: teal'
				// 	}, '你好,管理员')
				// });
				//          this.$router.push({ path:  "/" }).catch(()=>{});
				//        }).catch((res) => {
				//   console.log(res);
				//          this.loading = false;
				//          this.msgError(res.msg)
				//        });
				//      }
				//    });
				let ulist = {
					companyid: 1,
					depid: "1",
					password: "123123",
					rememberMe: false,
					username: "admin"
				}
				let userinfo = JSON.stringify(ulist);
				localStorage.setItem("userinfo", userinfo);
				localStorage.setItem("goods__token","test001")
				setName("管理员");
				setRoles(
					"1000,1100,1200,1300,1400,1500,2000,2100,2101,2102,2103,2200,2201,2202,2203,2300,2301,2302,2303,3000,3100,3200,3300,3400,3500,4000,4100,4101,4102,4200,5000,5100,5101,5102,5103,5104,5200,5201,5202,5203,5300,5301,5302,5303"
					);
				const h = this.$createElement;
				this.$notify({
					title: '登录成功',
					message: h('p', {
						style: 'color: teal'
					}, '你好,管理员')
				});
				this.$router.push({
					path: "/"
				}).catch(() => {});
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss">
	.el-form-item__content {
		width: 20rem;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-image: url("../../assets/images/login-background.png");
		background-size: cover;
		background-position: center;
	}

	.titlelog {
		margin: 0px auto 30px -9rem;
		text-align: left;
		color: #ffffff;
	}

	.login-form {
		border-radius: 6px;
		background-image: linear-gradient(to bottom, #4551c7c2, #4676cbc7);
		width: 25rem;
		margin-right: 15rem;
		margin-top: 2rem;
		padding: 25px 25px 5px 25px;

		.el-input {
			height: 50px;

			input {
				height: 50px;
			}
		}

		.input-icon {
			height: 49px;
			width: 14px;
			margin-left: 2px;
		}
	}

	.login-tip {
		font-size: 13px;
		text-align: center;
		color: #bfbfbf;
	}

	.login-code {
		width: 33%;
		height: 48px;
		float: right;

		img {
			cursor: pointer;
			vertical-align: middle;
		}
	}

	.el-login-footer {
		line-height: 25px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 15px;
		letter-spacing: 1px;
	}

	.login-code-img {
		height: 48px;
	}
</style>
